<template>
    <div ref="formContainer">
      <el-form label-width="80px" class="my-4">
        <el-row :gutter="10">
          <slot/>
          <el-col :span="6" class="my-1">
            <el-form-item class="mb-0" label-width="0px">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="clear">重置</el-button>
              <el-button type="primary" text @click="moreSearch=!moreSearch" style="margin-left: 10px;">
                {{moreSearch ? '收起':'展开'}}
                <el-icon>
                  <ArrowUp v-if="moreSearch"/>
                  <ArrowDown v-else />
                </el-icon>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="moreSearch">
          <slot name="more"></slot>
        </el-row>
      </el-form>
    </div>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'

const emit = defineEmits(['onMoreSearchChange', 'onSearch', 'onClearSearch'])

const search = () => {
  emit('onSearch')
}

const clear = () => {
  emit('onClearSearch')
}

// 创建 ref 引用
const formContainer = ref(null) // 用于引用 el-form 的容器

// 是否显示高级搜索
const moreSearch = ref(false)

// 监听 moreSearch 的变化
watch(moreSearch, () => {
  // 使用 nextTick 确保 DOM 更新完成
  nextTick(() => {
    if (formContainer.value) {
      const SearchFormHeight = formContainer.value.clientHeight // 获取 el-form 的高度
      emit('onMoreSearchChange', {moreSearch, SearchFormHeight})
    }
  })
})
</script>